<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 16px;
        }

        #searchInp {
            display: block;
            outline: none
        }

        a {
            display: block;
            text-decoration: none;
            color: #000;
            font-size: 18px;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            position: absolute;
            top: 20px;
            left: 50%;
            width: 500px;
            margin-left: -250px;
        }

        .box input {
            padding: 0 10px;
            width: 300px;
            line-height: 30px;
            border: 1px solid blueviolet;
        }

        .box ul {
            border: 1px solid blueviolet;
            position: relative;
            top: -1px;
            display: none;
        }

        .box ul li {
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            ;
        }

        .box ul li a:hover {
            background: #ccc
        }

        .highLight {
            background-color: blueviolet
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" id='searchInp'>
        <ul class="searchList">
            <li><a href="javascript:">111111</a></li>
            <li><a href="javascript:">2222222</a></li>
            <li><a href="javascript:">333333</a></li>
            <li><a href="javascript:">444444</a></li>
            <li><a href="javascript:">555555</a></li>
        </ul>
    </div>

    <ul class="wrap2">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <script src="./jquery1.11.3.js"></script>
    <script>
        let $box = $('.box'),
            $searchInp = $('#searchInp'),
            $searchList = $('.searchList')

        // 显示  文本框获取焦点并且文本框中有内容；在文本框输入操作内容（加删）有内容就显示，没内容就隐藏
        // 隐藏  点击页面空白处隐藏；点击searchLIst中类表隐藏，还有把类表中内容放在文本框中
        // $(document.body).delegate('#searchInp', 'click', function () {
        //     console.log($(this).val())
        //     $(this).val().replace(/^\s+|\s+$/g, '').length>0? $searchList.show():null

        // })
        $searchInp.on('focus keyup', function () {
            $(this).val().replace(/^\s+|\s+$/g, '').length > 0 ? $searchList.show() : $searchList.hide()

        })
        // jq事件委托  只有特定的儿子才能触发父亲委托事件
        $(document.body).delegate('.searchList a', 'click', function () {
            //this指代点击的a 文本框中呈现a的值，并且让ul消失 
            $searchInp.val($(this).text())
            $(this).parents('.searchList').hide()

        })
        let wrap2 = $('.wrap2')
        wrap2.delegate('li', 'mouseenter mouseleave', function () {
            $(this).toggleClass('highLight')
        })
        $(`<li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>`).appendTo(wrap2)


    </script>
</body>

<!-- 
事件委托:
利用事件冒泡传播机制，（触发事件源的事件行为，它所有父亲同类事件行为都会被触发）只指定一个父级事件处理程序，就可以管理某一类型的所有事件。

 -->

</html>